<script setup lang="ts">
import { h, ref, reactive } from 'vue'
import { NModal, NCard, NForm, NSpace, NFormItem, NInput, NButton, NDataTable, NPopconfirm } from 'naive-ui'
import type { FormInst, FormRules } from 'naive-ui'

const props = defineProps(["disabled", "currentMenu", "menuAuthData", "addMenuAuth", "editMenuAuth", "deleteMenuAuth"])

type RowData = {
    menuCode?: string
    menuName?: string
}

type FormData = {
    menuCode?: string
    menuName?: string
}

const menuAuthTableColumns = [
    {
        title: "功能权限编码",
        key: "menuCode"
    }, {
        title: "功能名称",
        key: "menuName"
    }, {
        title: "操作",
        key: "actions",
        width: "132px",
        render(rowData: RowData, rowIndex: number) {
            return h(
                NSpace, null,
                () => [
                    h(
                        NButton,
                        {
                            size: "small",
                            disabled: props.disabled,
                            onclick: () => openEditMenuAuth(rowData)
                        },
                        { default: () => "编辑" }
                    ),
                    h(
                        NPopconfirm,
                        {
                            onPositiveClick: (e: MouseEvent) => deleteMenuAuth()
                        },
                        {
                            trigger: () => {
                                return h(
                                    NButton,
                                    {
                                        size: "small",
                                        disabled: props.disabled,
                                        onclick: () => openDeleteMenuAuth(rowData)
                                    },
                                    { default: () => "删除" }
                                )
                            },
                            default: () => { return "确认删除？" }
                        }
                    )
                ]
            )
        }
    }
]

const visiable = ref<boolean>(false)
const title = ref<string>("")
const formRef = ref<FormInst | null>(null)
const formData = reactive<FormData>({
    menuCode: "",
    menuName: ""
})

const formRules: FormRules = ({
    menuCode: {
        required: true,
        message: '功能权限编码',
        trigger: ['input']
    },
    menuName: {
        required: true,
        message: '功能名称',
        trigger: ['input']
    }
})

function openAddMenuAuth() {
    visiable.value = true
    title.value = "添加功能"
    formData.menuCode = ""
    formData.menuName = ""
}

function openEditMenuAuth(row: any) {
    visiable.value = true
    title.value = "编辑功能"
    formData.menuCode = row.menuCode
    formData.menuName = row.menuName
}

function openDeleteMenuAuth(row: any) {
    formData.menuCode = row.menuCode
    formData.menuName = row.menuName
}

function submit() {
    formRef.value?.validate((errors) => {
        if (!errors) {
            if (title.value === "添加功能") {
                addMenuAuth()
            } else {
                updateMenuAuth()
            }
            visiable.value = false
        }
    })
}

function addMenuAuth() {
    const menuAuth = {
        menuCode: formData.menuCode,
        menuName: formData.menuName
    }
    props.addMenuAuth(menuAuth)
}

function updateMenuAuth() {
    const menuAuth = {
        menuCode: formData.menuCode,
        menuName: formData.menuName
    }
    props.editMenuAuth(menuAuth)
}

function deleteMenuAuth() {
    const menuAuth = {
        menuCode: formData.menuCode,
        menuName: formData.menuName
    }
    props.deleteMenuAuth(menuAuth)
}
</script>

<template>
    <n-space vertical>
        <n-button :disabled="props.disabled" @click="openAddMenuAuth()">新增</n-button>
        <n-data-table :columns="menuAuthTableColumns" :data="menuAuthData" :bordered="false" />
    </n-space>
    <n-modal v-model:show="visiable">
        <n-card style="width: 400px" :title="title">
            <n-form ref="formRef" :model="formData" :rules="formRules" label-width="106px" label-placement="left"
                require-mark-placement="left">
                <n-form-item label="功能权限编码" path="menuCode">
                    <n-input v-model:value="formData.menuCode" :disabled="title === '编辑功能'" placeholder="请输入功能权限编码"
                        clearable />
                </n-form-item>
                <n-form-item label="功能名称" path="menuName">
                    <n-input v-model:value="formData.menuName" placeholder="请输入功能名称" clearable />
                </n-form-item>
            </n-form>
            <template #footer>
                <n-space justify="end">
                    <n-button attr-type="button" @click="visiable = false">取消</n-button>
                    <n-button attr-type="button" @click="submit()">提交</n-button>
                </n-space>
            </template>
        </n-card>
    </n-modal>
</template>

<style scoped>

</style>